<template>
  <div>
    <div class="banner" :style="cover">
      <h1 class="banner-title">{{ displayedUserSign }}</h1>
    </div>
    <!-- 主页文章 -->
    <v-row class="home-container">
      <!-- 博主信息 -->
      <v-col md="3" cols="12" class="d-md-block d-none">
        <div class="blog-wrapper" >
          <v-card class="animated zoomIn blog-card mt-5" style="background-color: #6c9d8f;border: 1px solid #8c939d;">
            <div class="author-wrapper">
              <!-- 博主头像 -->
              <v-avatar size="110">
                <img class="author-avatar" :src="userAvatar" />
              </v-avatar>
              <div style="font-size: 1.375rem">
                {{ userName }}
              </div>
            </div>
            <!-- 关注 -->
            <div style="display: flex;">
              <div class="blog-info-data" style="margin-right: 10px;" v-if="showGuanzhu && alreadyGuanzhu">
                <a class="collection-btn" @click="cancelGuanzhu">
                  取消关注
                </a>
              </div>
              <div class="blog-info-data" style="margin-right: 10px;" v-if="showGuanzhu && !alreadyGuanzhu">
                <a class="collection-btn" @click="guanzhu">
                  关注
                </a>
              </div>
              <div class="blog-info-data" style="margin-right: 10px;" >
                <a class="collection-btn" @click="tip = true">
                  加入书签
                </a>
              </div>
              <div class="blog-info-data" v-if="showUserCenter">
                <a class="collection-btn" @click="toUserCenter">
                  个人中心
                </a>
              </div>
            </div>
          </v-card>

          <v-card class="animated zoomIn blog-card mt-5" style="margin-top: 10px!important;border: 1px solid #8c939d;">
            <!-- 用户基本信息统计 -->
            <div style="display: flex;padding: 0.875rem 0;">
              <!-- 文章个数 -->
              <div class="blog-info-data">
                <router-link :to=" '/archives/' + userId " tag="a" target="_blank">
                  <div style="font-size: 0.875rem;color: #7bc549">文章</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ articleCount }}
                  </div>
                </router-link>
              </div>
              <!-- 原创个数 -->
              <div class="blog-info-data" v-if="showFansList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">原创</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ originalArticleCount }}
                  </div>
              </div>
              <!-- 转载个数 -->
              <div class="blog-info-data" v-if="showCategoryList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">转载</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ reshipArticleCount }}
                  </div>
              </div>
              <!-- 收藏个数 -->
              <div class="blog-info-data" v-if="showFavoriteList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">收藏</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ favoriteCount }}
                  </div>
              </div>
            </div>

            <div style="display: flex;padding: 0.875rem 0;">
              <!-- 周排名 -->
              <div class="blog-info-data">
                  <div style="font-size: 0.875rem;color: #7bc549">周排名</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ weekRanking }}
                  </div>
              </div>
              <!-- 总排名 -->
              <div class="blog-info-data" v-if="showFansList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">总排名</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ ranking }}
                  </div>
              </div>
              <!-- 粉丝个数 -->
              <div class="blog-info-data" v-if="showCategoryList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">粉丝</div>
                  <div style="font-size: 1.25rem">
                    {{ fansCount }}
                  </div>
              </div>
              <!-- 评论个数 -->
              <div class="blog-info-data" v-if="showFavoriteList === 1">
                  <div style="font-size: 0.875rem;color: #7bc549">评论</div>
                  <div style="font-size: 1.25rem;color: #005cc5">
                    {{ commentCount }}
                  </div>
              </div>
            </div>
          </v-card>

          <!--   我的专栏       -->
          <v-card style="margin-top: 10px;padding: 1.25rem 1.5rem;border: 1px solid #8c939d;" v-if="columnList.length > 0">
            <div class="myzhuanlan">
              <i class="iconfont icon-logistics-warehouse" style="font-size: 20px;color: #6a737d" />
              <span style="margin-left: 5px;">
                我的专栏
              </span>

            </div>
            <div style="display: flex; align-items: center;"
                 v-for="(item, index) in columnList" :key="item.columnId">
              <div>
                <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" class="content-cover">
                  <img :src="item.columnCover" width="50px;" height="50px;"/>
                </router-link>
              </div>
              <div style="margin-left: 10px;">
                <div style="margin-bottom: 5px;">


                    <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" class="content-cover">
                      <div style="width: 80%;">
                      <span :title="item.columnName"
                            style="display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                        {{item.columnName}}
                      </span>
                      </div>
                    </router-link>



                  <div>
                    <span class="span1" style="margin-left: 5px;">
                      <font style="color: #735c0f;" >{{item.articleCount}}篇文章</font>
                    </span>
                  </div>

                </div>
              </div>
            </div>
          </v-card>

          <!--   个人成就       -->
          <v-card style="margin-top: 10px;padding: 1.25rem 1.5rem;border: 1px solid #8c939d;">
            <div class="myzhuanlan">
              <i class="iconfont icon-honor" style="font-size: 20px;color: #7bc549" />
              <span style="margin-left: 5px;">
                个人成就
              </span>
            </div>
            <div style="display: flex; align-items: center;">
              <div style="margin-left: 10px;" >

                <div style="margin-left: 5px;" v-if="userAchievementsInfo.originalArticleCount > 0">
                  <i class="iconfont icon-lable" style="font-size: 18px;color: #735c0f" />
                  <span style="margin-left: 10px;letter-spacing: 2px;">发表
                    <span style="color: red">{{ userAchievementsInfo.originalArticleCount }}</span>次原创
                  </span>
                </div>

                <div style="margin-left: 5px;" v-if="userAchievementsInfo.followCount > 0">
                  <i class="iconfont icon-success" style="font-size: 18px;color: #735c0f" />
                  <span style="margin-left: 10px;letter-spacing: 2px;">获得
                    <span style="color: red">{{ userAchievementsInfo.followCount }}</span>次关注
                  </span>
                </div>

                <div style="margin-left: 5px;" v-if="userAchievementsInfo.commentCount > 0">
                  <i class="iconfont icon-fuwuguwen" style="font-size: 18px;color: #735c0f" />
                  <span style="margin-left: 10px;letter-spacing: 2px;">获得
                    <span style="color: red">{{ userAchievementsInfo.commentCount }}</span>次评论
                  </span>
                </div>

                <div style="margin-left: 5px;" v-if="userAchievementsInfo.likesCount > 0">
                  <i class="iconfont icon-follow" style="font-size: 18px;color: #735c0f" />
                  <span style="margin-left: 10px;letter-spacing: 2px;">获得
                    <span style="color: red">{{ userAchievementsInfo.likesCount }}</span>次点赞
                  </span>
                </div>

              </div>
            </div>
          </v-card>

          <!--   关注我       -->
          <v-card class="blog-card animated zoomIn mt-5 big" style="margin-top: 10px!important;border: 1px solid #8c939d;">
            <div class="web-info-title">
              <i class="iconfont icon-customer-certified" style="font-size: 20px;color: #735c0f" />
                关注我
            </div>
            <div class="guanzhu" id="follow-us" ref="follow">
              <ul>
                <li>
                  <i class="iconfont icon-follow"
                     style="font-size: 18px;color: #735c0f;margin-right: 5px;margin-left: 5px;" />
                  <a href="https://gitee.com/invincible-style" target="_blank">https://gitee.com/invincible-style</a>
                </li>
              </ul>
            </div>
          </v-card>

        </div>
      </v-col>

      <v-col md="9" cols="12">
        <v-card>
          <div style="display: flex;margin-top: 20px;padding: 1rem 1rem;border: 1px solid #8c939d;">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1-2" >文章</el-menu-item>
              <el-menu-item index="2" >最近</el-menu-item>
              <el-menu-item index="5" >收藏夹</el-menu-item>
              <el-menu-item index="8" >专栏</el-menu-item>
              <el-menu-item index="6" >相册</el-menu-item>
              <el-submenu index="3">
                <template slot="title">关注/互动</template>
                <el-menu-item index="3-1">关注的人</el-menu-item>
                <el-menu-item index="3-5">粉丝</el-menu-item>
                <el-menu-item index="3-2">关注的专栏</el-menu-item>
                <el-menu-item index="3-4">关注的相册</el-menu-item>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">评论</template>
                <el-menu-item index="7-1">我的评论</el-menu-item>
                <el-menu-item index="7-2">收到的评论</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </v-card>

        <!--   文章列表     -->
        <v-card class="animated zoomIn article-card" v-if=" showArticle "
                style="border-radius: 12px 8px 8px 12px;border: 1px solid #8c939d;"
                v-for="(item, index) of articleList"
                :key="item.articleId">
          <!-- 文章封面图 -->
          <div :class="isRight(index)">
            <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
              <v-img width="100%" height="100%" :src="item.cover" style="border-radius: 12px 8px 8px 12px"/>
            </router-link>
          </div>
          <!-- 文章信息 -->
          <div class="article-wrapper" >
            <div style="line-height:1.4">
              <div>
                <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                  {{ item.title }}
                </router-link>
                <span v-if=" item.views >= 1000" class="span1">
                  <font style="color: #735c0f;">千次阅读</font>
                </span>
              </div>
            </div>
            <div class="article-info">
              <strong>作者</strong>：{{ item.authorName }}
            </div>
            <div class="article-info">
              <strong>创建：</strong><v-icon size="14">mdi-calendar-month-outline</v-icon>
              {{ item.createTime }} |
              <strong>更新：</strong><v-icon size="14">mdi-calendar-month-outline</v-icon>
              {{ item.updateTime }}
            </div>
            <div class="article-info">
              <!-- 文章分类 -->
              <router-link :to="'/categories/' + item.categoryId" tag="a" target="_blank">
                <v-icon size="14">mdi-inbox-full</v-icon>
                {{ item.categoryName }}
              </router-link>
              <span class="separator">|</span>
              <!-- 文章标签 -->
              <v-icon size="14">mdi-tag-multiple</v-icon>{{ item.labelName }}
            </div>
            <!-- 文章摘要 -->
            <div class="article-content">
              {{ item.summary }}
            </div>
          </div>
        </v-card>

        <!--   我的评论列表     -->
        <v-card v-if=" showComment "
                style="border-radius: 12px 8px 8px 12px;margin-top: 5px;"
                v-for="(item, index) of userCommentList"
                :key="index">
          <div style="padding: 10px;">
            <div style="display: flex">
              <div style="display: flex">
                我  <span style="color: #1abc9c">{{getFormat(item.commentCreateTime)}}  </span>评论了
                <router-link :to="'/user/' + item.articleUserId" tag="a" target="_blank">
                  <span style="color: #00a1d6"> {{ item.articleUserName }}</span>
                </router-link>
                的文章
                <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                  <div style="width: 100%">
                    <span :title="item.articleTitle"
                          style="color: #00a1d6;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                      {{ item.articleTitle  }}
                    </span>
                  </div>
                </router-link>
              </div>
            </div>
            <div style="width: 80%">
                <span style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap"
                      :title="item.commentContent">
                      {{ item.commentContent }}
                </span>
            </div>
          </div>
        </v-card>

        <!--   我接收到的评论列表     -->
        <v-card v-if=" showMyReceiveComment "
                style="border-radius: 12px 8px 8px 12px;margin-top: 5px;border: 1px solid #8c939d;"
                v-for="(item, index) of myReceiveCommentList"
                :key="index">
          <div style="padding: 10px;">
            <div style="display: flex">
              <div>
                <el-avatar :size="60"  >
                  <img :src="item.commentUserAvatar"/>
                </el-avatar>
              </div>
              <div style="margin-left: 10px;width: 90%">
                <div style="display: flex">
                  <div style="display: flex">
                    <router-link :to="'/user/' + item.articleUserId" tag="a" target="_blank">
                      <span style="color: #00a1d6"> {{ item.commentUserName }} </span>
                    </router-link>
                    <span style="color: #1abc9c">{{ item.commentCreateTime }}</span>
                    回复了你的文章
                    <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank">
                      <div style="width: 100%">
                        <span :title="item.articleTitle"
                              style="color: #00a1d6;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                          {{ item.articleTitle  }}
                        </span>
                      </div>

                    </router-link>
                  </div>
                </div>

                <div style="width: 80%">
                    <span style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap"
                          :title="item.commentContent">
                      {{ item.commentContent }}
                    </span>
                </div>

              </div>
            </div>
          </div>
        </v-card>

        <!--   最近浏览历史列表     -->
        <v-card class="animated zoomIn article-card" v-if=" showHistory "
                style="border-radius: 12px 8px 8px 12px;border: 1px solid #8c939d;"
                v-for="(item, index) of historyArticleList"
                :key="item.articleId">
          <!-- 文章封面图 -->
          <div :class="isRight(index)">
            <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
              <v-img  width="100%" height="100%" :src="item.cover" style="border-radius: 12px 8px 8px 12px"/>
            </router-link>
          </div>
          <!-- 文章信息 -->
          <div class="article-wrapper" >
            <div style="line-height:1.4">
              <div>
                <router-link :to="'/articles/' + item.articleId" tag="a" target="_blank">
                  {{ item.title }}
                </router-link>
                <span v-if=" item.views >= 1000" class="span1">
                  <font style="color: #735c0f;">千次阅读</font>
                </span>
              </div>
            </div>
            <div class="article-info">
              <strong>作者</strong>：{{ item.authorName }}
            </div>
            <div class="article-info">
              <strong>创建：</strong><v-icon size="14">mdi-calendar-month-outline</v-icon>
              {{ item.createTime }} |
              <strong>更新：</strong><v-icon size="14">mdi-calendar-month-outline</v-icon>
              {{ item.updateTime }}
            </div>
            <div class="article-info">
              <!-- 文章分类 -->
              <router-link :to="'/categories/' + item.categoryId" tag="a" target="_blank">
                <v-icon size="14">mdi-inbox-full</v-icon>
                {{ item.categoryName }}
              </router-link>
              <span class="separator">|</span>
              <!-- 文章标签 -->
              <v-icon size="14">mdi-tag-multiple</v-icon>{{ item.labelName }}
            </div>
            <!-- 文章摘要 -->
            <div class="article-content">
              {{ item.summary }}
            </div>
          </div>
        </v-card>

        <!--   关注的人列表     -->
        <div v-if=" showFollowUser " >
          <v-card style="margin-top: 10px;border: 1px solid #8c939d;" shadow="hover" v-for="(item, index) in followUserList" :key="item.userId">
            <div style="display: flex;justify-items: center">
              <div style="padding: 10px;">
                <el-avatar :size="50" style="cursor: pointer;" >
                  <img :src="item.avatar"/>
                </el-avatar>
              </div>
              <div style="padding: 7px 7px;">
                <div>
                  <span style="color: #735c0f;font-size: 16px;" >{{ item.userName }}</span>
                </div>
                <div style="margin-top: 7px;width: 100%;">
                  <span :title="item.userSign"
                        style="color: #6a737d;font-size: 16px;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" v-if="item.userSign">
                    {{ item.userSign }}
                  </span>
                  <span style="color: #6a737d;font-size: 16px;" v-else>
                    暂无签名
                  </span>
                </div>
              </div>
            </div>
          </v-card>
        </div>

        <!--   我的粉丝列表     -->
        <div v-if=" showMyFans " >
          <v-card style="margin-top: 10px;border: 1px solid #8c939d;" shadow="hover" v-for="(item, index) in myFansList" :key="item.userId">
            <div style="display: flex;justify-items: center">
              <div style="padding: 10px;">
                <el-avatar :size="50" style="cursor: pointer;" >
                  <img :src="item.fansAvatar"/>
                </el-avatar>
              </div>
              <div style="padding: 7px 7px;">
                <div>
                  <span style="color: #735c0f;font-size: 16px;" >{{ item.fansUserName }}</span>
                </div>
                <div style="margin-top: 7px;width: 100%" v-if="item.fansUserSign">
                  <span style="color: #6a737d;font-size: 16px;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap"
                         :title="item.fansUserSign">
                    {{ item.fansUserSign }}
                  </span>
                </div>
                <div style="margin-top: 7px;" v-else>
                  <span style="color: #6a737d;font-size: 16px;">
                    暂无签名
                  </span>
                </div>
              </div>
            </div>
          </v-card>
        </div>

        <!--   关注的专栏列表     -->
        <v-card v-for="(item, index) in myFollowColumnList" :key="item.columnId"
            v-if=" showMyFollowColumn " style="margin-top: 10px;border: 1px solid #8c939d;">
          <div style="display: flex;height: 100px;">
            <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" >
              <el-image style="width: 100px; height: 100px;border-radius: 5px;" :src="item.columnCover" />
            </router-link>
            <div style="padding: 10px;">
              <div style="width: 100%;">
                <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" style="height: 100px;">
                  <span :title="item.columnName"
                      style="color: #1abc9c;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">{{ item.columnName }}</span>
                </router-link>
              </div>
              <div style="margin-top: 25px;">
                <span style="color: #1f93ff">{{ item.followUserCount }}</span>人关注 ·
                <span style="color: #1f93ff">{{ item.articleCount }}</span>篇文章
              </div>
            </div>
          </div>
        </v-card>

        <!--   我的专栏列表     -->
        <v-card v-for="(item, index) in myColumnList" :key="item.columnId"
                v-if=" showMyColumn " style="margin-top: 10px;border: 1px solid #8c939d;">
          <div style="display: flex;height: 100px;">
            <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" >
              <el-image style="width: 100px; height: 100px;border-radius: 5px;" :src="item.columnCover" />
            </router-link>
            <div style="padding: 10px;">
              <div style="width: 100%">
                  <router-link :to="'/column/' + item.columnId" tag="a" target="_blank" style="height: 100px;">
                  <span :title="item.columnName"
                        style="color: #1abc9c;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">{{ item.columnName }}</span>
                  </router-link>
              </div>
              <div style="margin-top: 25px;">
                <span style="color: #1f93ff">{{ item.followUserCount }}</span>人关注 ·
                <span style="color: #1f93ff">{{ item.articleCount }}</span>篇文章
              </div>
            </div>
          </div>
        </v-card>

        <!--   收藏夹列表     -->
        <el-row>
          <el-col :span="12" v-for="(item, index) in myFavoritesList" :key="item.columnId" v-if=" showMyFavorites ">
            <v-card style="margin-top: 10px;margin-left: 2px;border: 1px solid #8c939d;">
              <div style="display: flex;height: 100px;">
                <div style="padding: 10px;">
                  <div style="width: 100%;">
                    <a style="height: 100px;" @click="viewFavoritesArticle(item.id, item.favoritesName, item.articleCount)">
                      <span :title="item.favoritesName"
                        style="color: #1abc9c;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                          {{ item.favoritesName }}
                      </span>
                    </a>
                  </div>
                  <div style="margin-top: 25px;">
                    <span style="color: #1f93ff">{{ item.articleCount }}</span> 篇文章
                  </div>
                </div>
              </div>
            </v-card>
          </el-col>
        </el-row>


        <!-- 文章分页按钮 -->
        <v-pagination v-if="articlePageCount > 0 && showArticle"
                      color="#00C4B6"
                      v-model="current"
                      :length="Math.ceil(articlePageCount / param.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 历史记录分页按钮 -->
        <v-pagination v-if="historyArticleParam.total > 0 && showHistory"
                      color="#00C4B6"
                      v-model="historyCurrent"
                      :length="Math.ceil(historyArticleParam.total / historyArticleParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 评论互动分页按钮 -->
        <v-pagination v-if="userCommentParam.total > 0 && showComment"
                      color="#00C4B6"
                      v-model="commentCurrent"
                      :length="Math.ceil(userCommentParam.total / userCommentParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 接收到的评论互动分页按钮 -->
        <v-pagination v-if="myReceiveCommentParam.total > 0 && showMyReceiveComment"
                      color="#00C4B6"
                      v-model="myReceiveCommentCurrent"
                      :length="Math.ceil(myReceiveCommentParam.total / myReceiveCommentParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 关注的博主分页按钮 -->
        <v-pagination v-if="followUserParam.total > 0 && showFollowUser"
                      color="#00C4B6"
                      v-model="followUserCurrent"
                      :length="Math.ceil(followUserParam.total / followUserParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 我的粉丝分页按钮 -->
        <v-pagination v-if="fansParam.total > 0 && showMyFans"
                      color="#00C4B6"
                      v-model="myFansCurrent"
                      :length="Math.ceil(fansParam.total / fansParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 关注的专栏分页按钮 -->
        <v-pagination v-if="followColumnParam.total > 0 && showMyFollowColumn"
                      color="#00C4B6"
                      v-model="myFollowColumnCurrent"
                      :length="Math.ceil(followColumnParam.total / followColumnParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 我的专栏分页按钮 -->
        <v-pagination v-if="myColumnParam.total > 0 && showMyColumn"
                      color="#00C4B6"
                      v-model="myColumnCurrent"
                      :length="Math.ceil(myColumnParam.total / myColumnParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <!-- 我的收藏夹分页按钮 -->
        <v-pagination v-if="myFavoritesParam.total > 0 && showMyFavorites"
                      color="#00C4B6"
                      v-model="myFavoritesCurrent"
                      :length="Math.ceil(myFavoritesParam.total / myFavoritesParam.pageSize)"
                      total-visible="7" style="margin-top: 20px;"
        />

        <el-dialog :title="userFavoriteName" :visible.sync="userFavoritesArticleVisible" width="30%" :before-close="handleCloseUserFavoritesArticle">
          <ul class="infinite-list" style="overflow:auto;" >
            <li v-for="(item, index) in userFavoritesArticleList" :key="item.articleId" class="infinite-list-item">
                <div style="display: flex">
                  <div>
                    <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank" >
                      <el-image style="width: 80px; height: 80px;border-radius: 5px;" :src="item.articleCover" />
                    </router-link>
                  </div>

                  <div style="margin-left: 20px;height: 85px;">
                    <router-link :to="'/articles/' + item.articleId " tag="a" target="_blank" >
                      <div style="width: 100%">
                      <span :title="item.title" style="color: #1f93ff;font-size: 16px;display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                        {{ item.articleTitle }}
                      </span>
                      </div>

                    </router-link>
                    <div style="margin-top: 25px;">
                      <span style="color: #6d757a">{{ item.createTime }}</span>
                    </div>

                  </div>
                </div>
            </li>
          </ul>
        </el-dialog>
      </v-col>

    </v-row>
    <!-- 提示消息 -->
    <v-snackbar v-model="tip" top color="#49b1f5" :timeout="2000">
      按CTRL+D 键将本页加入书签
    </v-snackbar>
  </div>
</template>

<script>
import { getUserArticle, getUserBaseInfo, getUserBrowseArticle } from "../../api/article";
import { userinfo, getUserAchievements } from "../../api/user";
import { checkIsFans, follow, getFollowUser, getUserFansList } from "../../api/fans";
import { getUserId } from "../../utils/cookieUtil";
import { dateFormat } from "../../utils/date";
import { getUserComment, getUserReceiveComment } from '../../api/comment';
import articleColumnApi from '../../api/articleColumn';
import userFavoritesApi from '../../api/userFavorites';

export default {
  created() {
    this.init();
  },

  data: function() {
    return {
      userFavoritesArticleVisible: false,
      myFavoritesCurrent: 1,
      myFollowColumnCurrent: 1,
      myReceiveCommentCurrent: 1,
      myFansCurrent: 1,
      followUserCurrent: 1,
      historyCurrent: 1,
      articlePageCount: 0,
      activeIndex: '1-2',
      userId: this.$route.params.userId,
      userName: "",
      userRole: "",
      userHomepageCover: "",
      userAvatar: "",
      userSign: '',
      displayedUserSign: '',
      index: 0,
      param: {
        pageNo: 1,
        pageSize: 10,
        status: ""
      },
      articleList: [],
      categories: [],
      historyArticleList: [],
      originalArticleCount: 0,
      reshipArticleCount: 0,
      ranking: 0,
      weekRanking: 0,
      commentCount: 0,
      articleCount: 0,
      fansCount: 0,
      favoriteCount: 0,
      current: 1,
      commentCurrent: 1,
      tip: false,
      showGuanzhu: true,
      alreadyGuanzhu: false,
      showMyFans: false,
      showFansList: 1,
      showFavoriteList: 1,
      showCategoryList: 1,
      showEditAndDelBtn: false,
      showArticle: true,
      showComment: false,
      showHistory: false,
      showFollowUser: false,
      showMyFollowColumn: false,
      showMyColumn: false,
      showMyFavorites: false,
      showUserCenter: false,
      showMyReceiveComment: false,
      showWaitAndDraft: false,
      myColumnCurrent: 1,
      userCommentParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      historyArticleParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      followUserParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      fansParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      followColumnParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      userCommentList: [],
      delCommentParam: {
        userId: this.$route.params.userId,
        commentIds: []
      },
      myColumnParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId,
        approveStatus: 2
      },
      myFavoritesParam: {
        pageNo: 1,
        pageSize: 20,
        total: 0,
        userId: this.$route.params.userId
      },
      myReceiveCommentParam: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        userId: this.$route.params.userId
      },
      columnList: [],
      followUserList: [],
      myFansList: [],
      myFollowColumnList: [],
      myColumnList: [],
      myFavoritesList: [],
      userFavoritesArticleList: [],
      myReceiveCommentList: [],
      userFavoriteName: '',
      userAchievementsInfo: {}
    }
  },

  methods: {
    // 初始化
    init() {
      // 检查是否关注
      this.checkGuanzhu();
      // 获取用户的信息
      this.fetchUserInfo();
      // 获取该用户的文章列表
      this.fetchUserArticle();
      // 获取文章数、分类数
      this.fetchUserBaseInfo();
      // 获取用户的专栏
      this.fetchUserColumn();
      // 获取用户的成就信息
      this.getUserAchievementsInfo();
    },

    // 获取用户的成就信息
    getUserAchievementsInfo() {
      getUserAchievements(this.$route.params.userId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userAchievementsInfo = data;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户的专栏(左侧专栏卡片)
    fetchUserColumn() {
      let param = {
        pageNo: 1,
        pageSize: 6,
        userId: this.$route.params.userId
      }

      articleColumnApi.columnList(param).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.columnList = data.list;
        } else {
          this.$message.error(message);
        }
      })
    },

    handleSelect(key) {
      if (key === '1-1') {
        this.param.status = '';
        this.showArticle = true;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.showMyFans = false;
        this.fetchUserArticle();
      } else if (key === '1-2') {
        this.showArticle = true;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyFans = false;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.param.status = 3;
        this.fetchUserArticle();
      } else if (key === '1-3') {
        this.showArticle = true;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFans = false;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.showMyFavorites = false;
        this.param.status = 2;
        this.fetchUserArticle();
      } else if (key === '1-4') {
        this.showArticle = true;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyFans = false;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.param.status = 1;
        this.fetchUserArticle();
      } else if (key === '2') {
        this.historyCurrent = 1;
        this.showArticle = false;
        this.showComment = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyFans = false;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.showHistory = true;
        this.fetchUserHistoryArticleList();
      } else if (key === '7-1') {
        this.showArticle = false;
        this.showComment = true;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyFans = false;
        this.showMyReceiveComment = false;
        this.showMyColumn = false;
        this.commentCurrent = 1;
        this.getCommentByUserId();
      } else if (key === '3-1') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showMyFans = false;
        this.showFollowUser = true;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.followUserCurrent = 1;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.fetchFollowUser();
      } else if (key === '3-5') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyFans = true;
        this.showMyColumn = false;
        this.showMyReceiveComment = false;
        this.myFansCurrent = 1;
        this.fetchMyFans();
      } else if (key === '3-2') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFans = false;
        this.showMyFollowColumn = true;
        this.showMyFavorites = false;
        this.showMyReceiveComment = false;
        this.showMyColumn = false;
        this.myFollowColumnCurrent = 1;
        this.fetchMyFollowColumn();
      } else if (key === '8') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFans = false;
        this.showMyFollowColumn = false;
        this.showMyFavorites = false;
        this.showMyColumn = true;
        this.showMyReceiveComment = false;
        this.myColumnCurrent = 1;
        this.fetchMyColumn();
      } else if (key === '5') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFans = false;
        this.showMyFollowColumn = false;
        this.showMyColumn = false;
        this.showMyFavorites = true;
        this.showMyReceiveComment = false;
        this.myFavoritesCurrent = 1;
        this.fetchMyFavorites();
      } else if (key === '7-2') {
        this.showArticle = false;
        this.showComment = false;
        this.showHistory = false;
        this.showFollowUser = false;
        this.showMyFans = false;
        this.showMyFollowColumn = false;
        this.showMyColumn = false;
        this.showMyFavorites = false;
        this.showMyReceiveComment = true;
        this.myReceiveCommentCurrent = 1;
        this.fetchMyReceiveComment();
      }
    },

    // 查询我接收到的评论
    fetchMyReceiveComment() {
      this.myReceiveCommentParam.pageNo = this.myReceiveCommentCurrent;
      getUserReceiveComment(this.myReceiveCommentParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.myReceiveCommentList = data.list;
          this.myReceiveCommentParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询我的收藏夹
    fetchMyFavorites() {
      this.myFavoritesParam.pageNo = this.myFavoritesCurrent;
      userFavoritesApi.getUserFavorites(this.myFavoritesParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.myFavoritesParam.total = data.total;
          this.myFavoritesList = data.list;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询我的专栏
    fetchMyColumn() {
      this.myColumnParam.pageNo = this.myColumnCurrent;
      this.myColumnParam.approveStatus = 2;
      articleColumnApi.columnList(this.myColumnParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.myColumnList = data.list;
          this.myColumnParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询我的关注的专栏列表
    fetchMyFollowColumn() {
      this.followColumnParam.pageNo = this.myFollowColumnCurrent;
      articleColumnApi.getUserFollowColumn(this.followColumnParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.followColumnParam.total = data.total;
          this.myFollowColumnList = data.list;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查看收藏夹中收藏的文章
    viewFavoritesArticle(id, favoritesName, articleCount) {
      if (articleCount === 0) {
        this.$message.info('该收藏夹未收藏文章');
        return;
      }

      userFavoritesApi.getFavoritesArticle(id).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userFavoritesArticleVisible = true;
          this.userFavoritesArticleList = data;
          this.userFavoriteName = favoritesName;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询我的粉丝列表
    fetchMyFans() {
      this.fansParam.pageNo = this.myFansCurrent;
      getUserFansList(this.fansParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.myFansList = data.list;
          this.fansParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 查询关注的博主
    fetchFollowUser() {
      this.followUserParam.pageNo = this.followUserCurrent;
      getFollowUser(this.followUserParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.followUserList = data.list;
          this.followUserParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户最近浏览历史
    fetchUserHistoryArticleList() {
      this.historyArticleParam.pageNo = this.historyCurrent;
      getUserBrowseArticle(this.historyArticleParam).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.historyArticleList = data.list;
          this.historyArticleParam.total = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户的评论
    getCommentByUserId() {
      this.userCommentParam.pageNo = this.commentCurrent;
      getUserComment(this.userCommentParam).then(res => {
        const { code, data } = res;
        if (code === 200) {
          this.userCommentList = data.list;
          this.userCommentParam.total = data.total;
        }
      })
    },

    // 检查是否关注
    checkGuanzhu() {
      if (!getUserId() || getUserId() === 'undefined') {
        this.showGuanzhu = true;
        this.showWaitAndDraft = false;
        return;
      }

      if (this.userId === getUserId()) {
        this.showGuanzhu = false;
        this.showUserCenter = true;
        this.showWaitAndDraft = true;
        return;
      }
      this.showWaitAndDraft = false;

      checkIsFans(this.userId, getUserId()).then(res => {
        const { code, data } = res;
        if (code === 200) {
          this.alreadyGuanzhu = data;
        }
      })
    },

    // 关注
    guanzhu() {
      if (!getUserId() || getUserId() === 'undefined') {
        this.$toast({ type: "error", message: '请先登录' });
        return;
      }

      let data = {
        "userId1": this.userId,
        "userId2": getUserId(),
        "status": 1
      }

      follow(data).then(res => {
        const { code, message } = res;
        if (code === 200) {
          this.$toast({ type: "success", message: "关注成功" });
          this.checkGuanzhu();
        } else {
          this.$toast({ type: "error", message: message });
        }
      })
    },

    // 取消关注
    cancelGuanzhu() {
      let data = {
        "userId1": this.userId,
        "userId2": getUserId(),
        "status": 0
      }

      this.$confirm('确认取消关注吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        follow(data).then(res => {
          const { code, message } = res;
          if (code === 200) {
            this.$toast({ type: "success", message: "取消关注成功" });
            this.checkGuanzhu();
          } else {
            this.$toast({ type: "error", message: message });
          }
        })
      }).catch(() => {
        // 取消删除
      });
    },

    // 获取用户的文章
    fetchUserArticle() {
      this.param.pageNo = this.current;
      this.param.userId = this.userId;
      getUserArticle(this.param).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.articleList = data.list;
          this.articlePageCount = data.total;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户的信息
    fetchUserInfo() {
      userinfo(this.userId).then(res => {
        const { code, data } = res;
        if (code === 200) {
          this.userRole = data.roleName;
          this.userHomepageCover = data.homepageCover;
          this.userName = data.userName;
          this.userAvatar = data.avatar;
          this.userSign = data.sign;
        } else {
          this.$router.push("/404")
        }
      })
    },

    // 获取用户的基本信息  包括粉丝数  文章数等
    fetchUserBaseInfo() {
      getUserBaseInfo(this.userId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.articleCount = data.articleTotalCount;
          this.fansCount = data.fansCount;
          this.favoriteCount = data.favoriteArticleCount;
          this.originalArticleCount = data.originalArticleCount;
          this.reshipArticleCount = data.reshipArticleCount;
          this.ranking = data.ranking;
          this.weekRanking = data.weekRanking;
          this.commentCount = data.commentCount;
        } else {
          this.$message.error(message);
        }
      })
    },

    // 去个人中心
    toUserCenter() {
      let path = this.$router.resolve({
        path: '/userCenter/' + this.userId
      })
      window.open(path.href,'_blank');
    },

    handleCreateTime(val) {
      if (!val) {
        return '';
      }
      return val.substr(0, 10);
    },

    showUserSign() {
      const interval = setInterval(() => {
        if (this.index < this.userSign.length) {
          this.displayedUserSign += this.userSign[this.index];
          this.index++;
        } else {
          this.index = 0 // 清除定时器
          clearInterval(interval)
        }
      }, 300);

    },

    handleCloseUserFavoritesArticle() {
      this.userFavoritesArticleVisible = false;
      this.userFavoritesArticleList = [];
      this.userFavoriteName = '';
    },

    // 格式化日期
    getFormat(date){
      return dateFormat(date);
    },

  },

  computed: {
    isRight() {
      return function(index) {
        if (index % 2 === 0) {
          return "article-cover left-radius";
        }
        return "article-cover right-radius";
      };
    },

    cover() {
      return "background: url(" + this.userHomepageCover + ") center center / cover no-repeat";
    }
  },

  watch: {
    current(value) {
      this.current = value;
      this.fetchUserArticle();
    },

    commentCurrent(value) {
      this.commentCurrent = value;
      this.getCommentByUserId();
    },

    historyCurrent(value) {
      this.historyCurrent = value;
      this.fetchUserHistoryArticleList();
    },

    followUserCurrent(val) {
      this.followUserCurrent = val;
      this.fetchFollowUser();
    },

    myFansCurrent(val) {
      this.myFansCurrent = val;
      this.fetchMyFans();
    },

    myFollowColumnCurrent(val) {
      this.myFollowColumnCurrent = val;
      this.fetchMyFollowColumn();
    },

    myColumnCurrent(val) {
      this.myColumnCurrent = val;
      this.fetchMyColumn();
    },

    myFavoritesCurrent(val) {
      this.myFavoritesCurrent = val;
      this.fetchMyFavorites();
    },

    myReceiveCommentCurrent(val) {
      this.myReceiveCommentCurrent = val;
      this.fetchMyReceiveComment();
    }

  },

  mounted() {
    this.showUserSign();
  }
};
</script>

<style scoped>
.blog-contact a {
  color: #fff !important;
}

.card-info-social a {
  font-size: 1.5rem;
}

.article-wrapper {
  font-size: 14px;
}
@media (min-width: 760px) {
  .home-container {
    max-width: 1200px;
    margin: 330px auto 28px auto;
    padding: 0 5px;
  }
  .article-card {
    display: flex;
    align-items: center;
    height: 280px;
    width: 100%;
    margin-top: 20px;
  }

  .article-card-comment {
    display: flex;
    align-items: center;
    height: 180px;
    width: 100%;
    margin-top: 20px;
  }

  .article-cover {
    overflow: hidden;
    height: 100%;
    width: 45%;
  }

  .article-cover-comment {
       overflow: hidden;
       height: 100%;
       width: 25%;
  }

  .on-hover {
    transition: all 0.6s;
  }
  .article-card:hover .on-hover {
    transform: scale(1.1);
  }
  .article-wrapper {
    padding: 0 1.5rem;
    width: 55%;
  }

  .article-wrapper a {
    font-size: 1.5rem;
    transition: all 0.3s;
  }
}
@media (max-width: 759px) {
  .blog-title {
    font-size: 26px;
  }
  .blog-contact {
    font-size: 1.25rem;
    line-height: 2;
  }
  .home-container {
    width: 100%;
    margin: calc(100vh - 66px) auto 0 auto;
  }
  .article-card {
    margin-top: 1rem;
  }
  .article-cover {
    border-radius: 8px 8px 0 0 !important;
    height: 230px !important;
    width: 100%;
  }
  .article-cover div {
    border-radius: 8px 8px 0 0 !important;
  }
  .article-wrapper {
    padding: 1.0rem 1.25rem 1.875rem;
  }
  .article-wrapper a {
    font-size: 1.25rem;
    transition: all 0.3s;
  }
}

.scroll-down i {
  font-size: 3rem;
}
.article-wrapper a:hover {
  color: #8e8cd8;
}
.article-info {
  font-size: 95%;
  color: #858585;
  line-height: 2;
  margin: 0.375rem 0;
}
.article-info a {
  font-size: 95%;
  color: #858585 !important;
}
.article-content {
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.blog-wrapper {
  position: sticky;
  top: 10px;
}
.blog-card {
  line-height: 2;
  padding: 1.25rem 1.5rem;
}
.author-wrapper {
  text-align: center;
}
.blog-info-data {
  flex: 1;
  text-align: center;
}
.blog-info-data a {
  text-decoration: none;
}
.collection-btn {
  text-align: center;
  z-index: 1;
  font-size: 14px;
  position: relative;
  display: block;
  background-color: #49b1f5;
  color: #fff !important;
  height: 32px;
  line-height: 32px;
  transition-duration: 1s;
  transition-property: color;
}
.collection-btn:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #ff7242;
  content: "";
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  transition-property: transform;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.collection-btn:hover:before {
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  transform: scaleX(1);
}
.author-avatar {
  transition: all 0.5s;
}
.author-avatar:hover {
  transform: rotate(360deg);
}

@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
}
.big i {
  color: #f00;
  animation: big 0.8s linear infinite;
}
@keyframes big {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.guanzhu ul li {
  font-size: 12px;
  margin-bottom: 10px;
  background: #fff;
  color: #525252;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.card-title {
  padding-left: 40px;

  &::before,
  &::after {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: none;
    background: #fc625d;
    border-radius: 50%;
    top: 4px;
    left: 20px;
    content: "";
  }

  &::after {
    left: 5px;
    background-color: #fdbc40;
  }
}

.article-item img {
  width: 100%;
  height: 100%;
  transition: all 0.6s;
  object-fit: cover;
}

.article-item img:hover {
  transform: scale(1.1);
}

.content-title a {
  transition: all 0.2s;
  font-size: 95%;
}

.content-title a:hover {
  color: #2ba1d1;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.span1 {
  font-size:12px;
  border-radius:3px;
  border: 1px solid  #f70;
  text-align: center;
  margin-right: 5px;
}

.span2 {
  font-size:12px;
  border-radius:3px;
  border: 1px solid  #f70;
  text-align: center
}

.myzhuanlan {
  display: flex;
  align-items: center;
  line-height: 2;
  font-size: 16.8px;
  margin-bottom: 6px;
}
</style>
